<template>
  <Sidebar>
    <router-link class="sidebar-title flex align-items-center" :to="`/${$rp.SPACES}/${spaceId}`">
      <space-avatar :space="currentSpace" class="shrink-0" />
      <span class="m-l-10 title collapse-hide line2" style="white-space: unset;">
        {{ currentSpace.title }}
      </span>
    </router-link>
    <el-menu class="sidebar a-link-item" :default-active="activeIndex">
      <el-menu-item class="sidebar-item" :index="$rp.SPACE_HOMEPAGE">
        <router-link :to="`/${$rp.SPACES}/${spaceId}`">
          <svg-icon icon-name="sidebar-homepage"/>
          <span class="m-l-10 collapse-hide">主页</span>
        </router-link>
      </el-menu-item>
      <el-menu-item
        class="sidebar-item"
        :index="$rp.SPACE_RESOURCES"
        :class="{ 'is-active': docItemActive }"
      >
        <router-link :to="`/${$rp.SPACES}/${spaceId}/${$rp.SPACE_RESOURCES}`">
          <svg-icon icon-name="gitlab_documents"/>
          <span class="m-l-10 collapse-hide flex-1">资源区</span>
          <span class="item-count collapse-hide">{{ currentSpaceSidebarStatistics.docs }}</span>
        </router-link>
      </el-menu-item>
      <el-menu-item class="sidebar-item" :index="$rp.SPACE_ISSUES">
        <router-link :to="`/${$rp.SPACES}/${spaceId}/${$rp.SPACE_ISSUES}`">
          <svg-icon icon-name="gitlab_comments"/>
          <span class="m-l-10 collapse-hide flex-1">讨论区</span>
          <span class="item-count collapse-hide">{{ currentSpaceSidebarStatistics.issues }}</span>
        </router-link>
      </el-menu-item>
      <el-menu-item class="sidebar-item" :index="$rp.SPACE_CONTRIBUTIONS">
        <router-link :to="`/${$rp.SPACES}/${spaceId}/${$rp.SPACE_CONTRIBUTIONS}`">
          <svg-icon icon-name="gitlab_epic"/>
          <span class="m-l-10 collapse-hide flex-1">贡献区</span>
          <span class="item-count collapse-hide">{{ currentSpaceSidebarStatistics.ctrbs }}</span>
        </router-link>
      </el-menu-item>
      <el-menu-item class="sidebar-item" index="groups">
        <router-link :to="`/spaces/${spaceId}/groups`">
          <svg-icon icon-name="users-fill"/>
          <span class="m-l-10 collapse-hide flex-1">群组</span>
          <template v-if="currentSpaceSidebarStatistics.groups">
            <span class="item-count collapse-hide">{{ currentSpaceSidebarStatistics.groups }}</span>
          </template>
        </router-link>
      </el-menu-item>
      <el-menu-item v-if="isSpaceOwner || isSpaceAdmin" class="sidebar-item" :index="$rp.SETTINGS">
        <router-link :to="`/${$rp.SPACES}/${spaceId}/${$rp.SETTINGS}`">
          <svg-icon icon-name="gitlab_settings"/>
          <span class="m-l-10 collapse-hide">设置</span>
        </router-link>
      </el-menu-item>
    </el-menu>
  </Sidebar>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import Sidebar from '@/components/shared/Sidebar';
import SpaceAvatar from '@/components/space-avatar';

export default {
  name: 'SpaceSidebar',
  components: { Sidebar, SpaceAvatar },
  computed: {
    ...mapState(['currentSpace', 'currentSpaceSidebarStatistics', 'currentUser']),
    ...mapGetters(['isSpaceOwner', 'isSpaceAdmin']),
    spaceId() { return this.$route.params.spaceId; },
    activeIndex() { return this.$route.path.split('/')[3] || this.$rp.SPACE_HOMEPAGE; },
    isOwner() { return this.currentSpace.owner.id === this.currentUser.id; },
    isAdmin() { return this.currentSpace.adminIds.includes(this.currentUser.id); },
    docItemActive() {
      const key = this.$route.path.split('/')[3];
      return ['resources', 'resources-docs', 'resources-uploads'].includes(key);
    },
  },
};
</script>

<style></style>
